require.config({
    paths:{
        "jquery":"../lib/jquery.min",
        "mode":"module"
    }
})

require(['jquery'],function($){
    $(function(){
        require(['mode'],function(myMode){
            myMode.baseMode()
           //这里写本页面专用的js
            //全选按钮
            $('.catalist_all').click(function(){
                location.href = './goodlist.html' + myMode.info()
            })
            //购物袋按钮 -- 跳转页面功能
            $('.bag').click(function(){
                location.href = './cart.html' + myMode.info()
            })
            //登录框登录按钮
            $('#logo').click(function(){
                location.href = './' + myMode.info()
            })
            
            //这里写本页专用代码
             //渲染页面的商品，这里只用接收到图片的id作为索引（为了方便操作，令图片id == 图片文件名）。
            //放大镜要用到5张小图，不再造json，暂时用相邻的5张图片当做详情图片
            //加密：encodeURI(url),解密：decodeURI(url) 
            let goodUrl = decodeURI(location.href)  //获取链接
            // console.log(goodurl);
            //goodUrl : localhost/good.html?id=123&name=eee
            let urlTemp = goodUrl.split('?')[1].split('&')
            var tempArr = []
            var urlID,urlPrice,urlTitle;
            $.each(urlTemp,function(index,item){
                tempArr.push(item.split('=')[1])
            })
            urlID = tempArr[0];  //取出id,price,title,m-title,o-price，用于渲染页面
            urlPrice= tempArr[1];
            urlTitle =tempArr[2];
            urlTitleM = tempArr[3];
            urlPriceO = tempArr[4];
            // 渲染页面
            var tempGood = `
                <h2>「360官方商城」<span id="title">`+urlTitle+`</span></h2>
                <h3 id="m-title">`+urlTitleM+`</h3>
                <div class="price_con">
                    <p>价格：<span class="price">￥`+urlPrice+`</span></p>
                    <p>原价：<del class="o-price">￥`+urlPriceO+`</del></p>
                    <p><span>直降：</span><span class="x-price">`+eval(urlPriceO-urlPrice)+`</span>元<span class="post-b">「满99包邮到家」</span></p>
                </div>
                <div class="num_area">
                    <span>数 量：  </span><input type="button" value="-"><input type="text" name="" value="1"><input type="button" value="+">
                </div>
                <div class="buy_area">
                    <button>立即购买</button>
                    <button data-id=`+urlID+` class="add_good">加入购物车</button>
                </div>
                <div class="service">
                <img src="./imgs/service.png">
                </div>
            `
            $('.detail_right').html(tempGood)

            // 放大镜模块
            var nowImg = './imgs/'+urlID +'.jpg'       //利用链接的id拼接图片url
            $('.origin img').attr('src',nowImg)     //图片url给origin下的img
            $('.magnify img').attr('src',$('.origin img').attr('src'))  //origin下图的url给magnify

            //鼠标移动到原框显示放大框
            $('.origin').hover(()=>{
                $('.magnify').show()
            },()=>{
                $('.magnify').hide()
            })
            //放大镜
            $('.origin').mousemove(function(e){
                let Left = e.pageX - $('.origin').offset().left - $('.img_mask').width()/2;
                let Top = e.pageY- $('.origin').offset().top - $('.img_mask').height()/2;
                let maxX = $('.origin').width() - $('.img_mask').width()   //mask能走的最大水平距离。 最小距离是0
                let maxY = $('.origin').height() - $('.img_mask').height()  //垂直距离
                let imgLeft,imgTop   //放大图片的偏移量
                // $("p").css("background-color","yellow");
                if(Left<=0){        //如果遮罩相对父元素的left为0.（遮罩移动到了左边框）
                    $('.img_mask').css('left',"0")   //让遮罩继续留在父元素框内，但是鼠标还可以移，直到鼠标移出
                    imgLeft=0
                }else if(Left>=maxX){    //如果遮罩相对父元素的left达到最大值，遮罩移动到了右边框，让遮罩继续留在父元素内，鼠标继续移动
                    $('.img_mask').css('left',maxX+'px')
                    imgLeft = maxX
                }else{
                    $('.img_mask').css('left',Left+'px') //mask相对父元素的left赋值
                    imgLeft = Left
                }
                if(Top<=0){   //与left类似。       
                    imgTop = 0
                    $('.img_mask').css('top',"0")
                }else if(Top>=maxY){
                    $('.img_mask').css('top',maxY+'px')
                    imgTop = maxY
                }else{
                    $('.img_mask').css('top',Top+'px')
                    imgTop = Top
                }
                $('.magnify img').css('left',-1.5*imgLeft+'px')      //放大图片移动的方向是和鼠标移动方向相反的
                $('.magnify img').css('top',-1.5*imgTop+'px')   //1.5放大倍数
            })
            //放大镜下面的图片切换
            $('.detail_img').each(function(index,item){
                let temp = `<img src="./imgs/`+(parseInt(urlID)+index)+`.jpg" alt="">`
                $(item).html(temp)
            })
            //鼠标移动，切换图片
            $('.detail_img').hover(function(){
                let nowImg = $(this).children().attr('src')
                $('.origin img').attr('src',nowImg)
                $('.magnify img').attr('src',$('.origin img').attr('src'))  //origin下图的url给magnify
                $('.detail_img').css('border-bottom-color','#f0f0f0')
                $(this).css('border-bottom-color','#41cc6e')
            })

            //监听其他页面更改localstorage,自动刷新
            window.addEventListener("storage", function () { 
                location.reload(); 
            })

            //加入购物车功能
            if(localStorage.getItem('goods')){
                var goodArr = JSON.parse(localStorage.getItem('goods'))
            }else{
                var goodArr = []
            }
            //数量修改按钮
            var decBtn =  $('.num_area input:first')
            // console.log(decBtn)
            var modBtn = decBtn.next()
            var addBtn = modBtn.next()
            decBtn.click(function(){
                if( $(this).next().val()<=1){
                    return
                }
                $(this).next().val(function(i,o){
                    return  --o
                }) 
            })
            addBtn.click(function(){
                $(this).prev().val(function(i,o){
                    return  ++o
                }) 
            })
            modBtn.blur(function(){
                if($(this).val()<1){
                    $(this).val(1)
                }
            })

            //加入购物车按钮
            $('.add_good').click(function(){ 
                let id = $(this).attr('data-id')
                let flag = false
                $.each(goodArr,function(index,item){
                    if(item.id == id){
                        item.num+=parseInt(modBtn.val())   //把最终输入框的数量写入
                        flag = true
                    }
                })
                if(!flag){
                    goodArr.push({'id':id,'num':parseInt(modBtn.val()),'check':true})
                }
                localStorage.setItem('goods',JSON.stringify(goodArr))
                alert("添加成功")
            })

         })
        
    })
})

   